var rocket = document.querySelector(".rocket");
rocket.addEventListener("click", function () {
  this.classList.add("rocket-active");
  var rocketRect = rocket.getBoundingClientRect();
  console.log(rocketRect);

  var bodyScroll =
    document.body.scrollTop || document.documentElement.scrollTop;
  console.log(bodyScroll);

  //得到路程总量
  var gross = rocketRect.bottom - rocketRect.height / 2;
  console.log(gross);

  //计算偏移量
  var count = 0,
    rocketStep = gross / 60,//火箭偏移步伐,把偏移总量除以60得到每一帧的偏移量
  //   rocketaddStep = 800 / 10, //80
  // rocketsmallStep = (gross-800) / 360,  //25

  bodyScrollStep = bodyScroll / 60;
  function rocketAnimate() {
    //  if (Math.abs(count) >= gross) {
    //   cancelAnimationFrame(rocketAnimate);
    //   rocket.classList.remove("rocket-active");
    //   rocket.style.transform = `translateY(0px)`;
    // }
    // if (bodyScroll < 800) {
    //   count -= rocketsmallStep;
    //   rocket.style.transform = `translateY(${count}px)`;
    //   document.body.scrollTop = document.documentElement.scrollTop = bodyScroll -= bodyScrollStep;
    //   console.log("加速");
    //   requestAnimationFrame(rocketAnimate);
    // } else {
    //   count -= rocketaddStep;
    //   rocket.style.transform = `translateY(${count}px)`;
    //   document.body.scrollTop = document.documentElement.scrollTop = bodyScroll -= bodyScrollStep;
    //   console.log("减速");
    //   requestAnimationFrame(rocketAnimate);
    // }

    if (Math.abs(count) >= gross) {
      cancelAnimationFrame(rocketAnimate);
      rocket.classList.remove("rocket-active");
      rocket.style.transform = `translateY(0px)`;
    } else {
      count -= rocketStep;
      rocket.style.transform = `translateY(${count}px)`;
      document.body.scrollTop = document.documentElement.scrollTop = bodyScroll -= bodyScrollStep;
      requestAnimationFrame(rocketAnimate);
    }
  }
  requestAnimationFrame(rocketAnimate);
});
